<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>


    <!-- 1. 引入插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">

   <!-- 1. 引入jQuery -->
    <script src="./lib/jquery.min.js"></script>

    <!-- 2. 引入轮播插件 -->
    <script src="./lib/jquery.slidebox.js"></script>

    <!-- 4. 引入当前页面js文件 -->
    <script src="./js/index.js"></script>
</head>
<body style="margin-bottom: 200px;">
 <div class="pptbox fl" id="slider">
            <ul class="innerwrapper">
                <li>
                    <a href="#">
                        <img src="./imgs/banner1.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imgs/banner2.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imgs/banner3.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imgs/banner4.jpg" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imgs/banner5.jpg" />
                    </a>
                </li>
            </ul>
            <ul class="controls">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
</body>
</html>